<template>
    <div>
         <!-- 公告 header -->
      <div class="indexUse_header">
        <div class="wrap  headerBox">
          <div class="logo">
            <img src="@/assets/image/logo_shape@2x.png" alt />
            联众医药
          </div>
          <div class="nav">
            <div
              @mouseover="headerTab = 1"
              @mouseout="headerTab = -1"
              @click="commitHandle(0)"
              :class="{userArrActives : headerTab ==1}"
            >首页</div>
            
            <div
              @mouseover="headerTab = 3"
              @mouseout="headerTab = -1"
              :class="{userArrActives : headerTab ==3}"
            >
              消息
              <img v-show="headerTab != 3" src="@/assets/image/top_Open_icon@2x.png" alt />
              <img v-show="headerTab == 3" src="@/assets/image/top_Retract@2x.png" alt />
              <i v-show="headerTab == 3"></i>
              <div v-show="headerTab == 3" class="server news">
                <p class="one">医生入驻审核失败，失败原因</p>
                <p class="one">失败原因：头像不清晰阿斯利康就开了个地方就开始大红</p>
                <p class="goAllNews">查看全部消息</p>
              </div>
            </div>
          </div>
          <div
            class="ffr"
            @mouseover="headerTab = 4"
            @mouseout="headerTab = -1"
            :class="{userArrActives : headerTab ==4}"
          >
            <div class="ffrs">
              姓名
              <img v-show="headerTab != 4" src="@/assets/image/top_Open_icon@2x.png" alt />
              <img v-show="headerTab == 4" src="@/assets/image/top_Retract@2x.png" alt />
              <i v-show="headerTab == 4"></i>
              <div v-show="headerTab == 4" class="server">
                <div
                  @mouseover="userArrActive = i"
                  @mouseout="userArrActive = -1"
                  :class="{userArrActive : userArrActive ==i}"
                  v-for="(v,i) in myArr"
                  :key="i"
                  class="list"
                >
                  <img v-show="userArrActive ==i" :src="v.img1" alt />
                  <img v-show="userArrActive !=i" :src="v.img2" alt />
                  {{v.txt}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="indexUse_header_min">
        <div class="wrap">
          <img
            @click="commitHandle(1)"
            class="myHeaderImg fl"
            src="@/assets/image/Furtherconsultation_Defaulthead@2x.png"
            alt
          />
          <div class="fl myName">
            <p>医生名称</p>
            <p>
              <img @click="commitHandle(1)" src="@/assets/image/top_Basicinformation_icon@2x.png" alt />
            </p>
          </div>
          <div class="fr fns fn">
            <p>
              <img  src="@/assets/image/top_wallet_icon@2x.png" alt />我的钱包
            </p>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
     data() {
    return {
      headerTab: -1,
      nav: -1,
      userArr: [
        {
          txt: "我的服务",
          img1: require("@/assets/image/top_Open_Interrogation_hover@2x.png"),
          img2: require("@/assets/image/top_Open_Interrogation@2x.png")
        },
        {
          txt: "我的药房",
          img1: require("@/assets/image/top_Open_Doctor_hover@2x.png"),
          img2: require("@/assets/image/top_Open_Doctor@2x.png")
        },
        {
          txt: "我的评价",
          img1: require("@/assets/image/top_Open_Medication_hover@2x.png"),
          img2: require("@/assets/image/top_Open_Medication@2x.png")
        }
      ],
      myArr: [
        {
          txt: "退出",
          img1: require("@/assets/image/top_Open_Signout_hover@2x.png"),
          img2: require("@/assets/image/top_Open_Signout@2x.png")
        }
      ],
      userArrActive: -1
    };
  },
  methods:{
    commitHandle(num) {
      this.$emit("changeState", num);
    }
  }
}
</script>
<style lang="less" scoped>
// @import "./index";
 .indexUse_header{
    cursor: Pointer;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px;
    line-height: 66px;
    background: white;
    z-index: 9;
    .headerBox{
        display: flex;
        position: relative;
    }
    .logo{
        font-size: 24px; 
      img{
        width: 44px;
        height: 28px;
      }
    }
    .nav{
        display: flex;
        margin-left: 110px;
    }
    .nav>div{
        text-align: center;
        width: 120px;
        position: relative;
        cursor: pointer;
        i{
            position: absolute;
            display: block;
            bottom: -10px;
            left: 50px;
            width: 20px;
            height: 20px;
            background: white;
            transform:rotate(45deg);
            z-index: 1;
           box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
        }
    }
    .server{
        position: absolute;
        top: 66px; 
        width: 176px;
        left:-28px;
        z-index: 2;
        border-radius:6px;
        background: white;
        box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
    }
    .server>.list{
            color: #000;
            cursor: pointer;
            height: 58px;
            line-height: 58px;
            font-size: 16px;
        img{
            width: 32px;
            height: 32px;
            vertical-align: middle;
        }
    }
    .userArrActives{
        color: #4EEEC8;
    }
    .userArrActive{
        color: #4EEEC8!important;
    }
    .news{
        color: #000;
        width: 364px;
        // height: 150px;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 14px;
        p{
            background: #F5F5F5;
            text-align: left;
            font-size: 14px;
            height: 42px;
            line-height: 42px;
            padding-left: 10px;
            margin-bottom: 2px;
            cursor: pointer;
        }
        .goAllNews{
            margin-top: 10px;
            background: white;
            color: #4EEEC8;
            text-align: center;
        }
    }
    .ffr{
        position: absolute;
        top: 0;
        right: 0;
        img{
            vertical-align: middle;
        }
        >.ffrs{
            position: relative;
        }
        i{
            position: absolute;
            display: block;
            bottom: -10px;
            left: 22px;
            width: 20px;
            height: 20px;
            background: white;
            transform:rotate(45deg);
            z-index: 1;
           box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
        }
        .server{
            text-align: center;
            left: -58px!important;
        }
    }
}

// header min 
 .indexUse_header_min{
    margin-top: 68px;
    height: 120px;
    background: #4EEEC8;
    >div{
        line-height: 120px;
    }
    .myHeaderImg{
        margin-top: 20px;
        width: 80px;
        height: 80px;
    }
    .myName{
        margin-left: 20px;
        padding-top: 28px;
        font-size: 18px;
        p{
            height: 30px;
            line-height: 30px;
            color: white;
        }
        p:nth-of-type(2){
            margin-top: 10px;
        }
        img{
            width: 30px;
            margin-right: 10px;
            height: 30px;
            cursor: Pointer;
        }
    }
    .fn{
        margin-left: 20px;
        padding-top: 22px;
        p{
            cursor: Pointer;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding-left: 14px;
            padding-right: 14px;
            border:1px solid white ;
            background:rgba(255,255,255,0.2);
            color: white;
            margin-right: 18px;
            border-radius:4px;
        }
    }
    .fns{
        img{
            margin-right: 8px;
        }
        p{
            margin-right: 0;
            margin-left: 18px;
        }
    }
}
</style>